---
title: Caption
description: Usage instructions for the Caption component
---

<PageDescription>


The `<Caption>` component is typically used below images or videos. They will
default to 4 columns wide unless placed inside a `<Row>` component. In this
case, it will assume the full width of its containing column.

</PageDescription>


## Example

<Title>Normal</Title>

![Colors](images/design-for-ai-art.png)

<Caption>
  This is a regular caption. It will attempt to respond to it’s container
  element appropriately.
</Caption>

<Title>Full-width</Title>

![Colors](images/design-for-ai-art.png)

<Caption fullWidth>
  This is a full width caption. With this prop, the caption’s width will be 100%
  so it will fill its container.
</Caption>

## Code

<Title>Normal</Title>

```mdx path=components/Caption/Caption.js src= https://github.com/carbon-design-system/gatsby-theme-carbon/tree/main/packages/gatsby-theme-carbon/src/components/Caption
<Caption>
  This is a regular caption. It will attempt to respond to it’s container
  element appropriately.
</Caption>
```

<Title>Full</Title>-width

```mdx path=components/Caption/Caption.js src= https://github.com/carbon-design-system/gatsby-theme-carbon/tree/main/packages/gatsby-theme-carbon/src/components/Caption
<Caption fullWidth>


This is a full width caption. With this prop, the caption’s width will be 100%
so it will fill its container.

</Caption>

```

### Props

| property  | propType | required | default | description           |
| --------- | -------- | -------- | ------- | --------------------- |
| children  | node     |          |         |                       |
| fullWidth | bool     |          |         | Set to full width     |
| className | string   |          |         | Add custom class name |
